 <template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="dep" label="部门" width="280"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template #default="{ row }">
          <p>{{ formatSex(row.sex) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            @click="$router.push('/home/detail/' + row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="100"
      background
    >
      >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.createData()
  },
  methods: {
    // 正常：调接口
    createData (page) {
      const tableData = []
      for (let index = 0; index < 10; index++) {
        tableData.push({
          id: index,
          name: '刘' + (page || 1),
          dep: '总裁办',
          sex: Math.floor(Math.random() * 2 + 1) // 性别随机
        })
      }
      // 数据驱动视图
      this.tableData = tableData
    },
    currentChange (page) {
      // page当前页码 =》造假数据
      this.createData(page)
    },
    formatSex (val) {
      switch (val) {
        case 1:
          return '男'

        default:
          return '女'
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
